<template>
  <el-dialog :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="800px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
        <el-col :span="24">
          <el-form-item label="问题描述" prop="question">
            <el-input v-model="dataForm.question" placeholder="请输入" clearable required :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="问题分类" prop="category">
            <el-select v-model="dataForm.category" placeholder="请选择" clearable required :style="{ width: '100%' }">
              <el-option v-for="(item, index) in categoryOptions" :key="index" :label="item.fullName" :value="item.enCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="问题来源" prop="sourse">
            <el-select v-model="dataForm.sourse" placeholder="请选择" clearable required :style="{ width: '100%' }" filterable>
              <el-option-group v-for="group in sourseOptions" :key="group.id" :label="group.fullName">
                <el-option v-for="item in group.children" :key="item.id" :label="item.fullName" :value="item.enCode"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="dataForm.status" placeholder="请选择" clearable required :style="{ width: '100%' }">
              <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.fullName" :value="item.enCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="标签分类" prop="keywords" class="tag">
            <div>
              <div
                class=" el-input__inner"
                style="min-height: 34px;
    line-height: 34px;
    margin-bottom: 5px;height: auto"
              >
                <el-tag closable @close="handleClose(item)" v-for="(item, key) in dataForm.keywords" :key="key" style="margin-right: 5px">{{ item }}</el-tag>
              </div>
              <el-tag v-for="(item, key) in ['标签一', '标签二', '标签三', '标签四', '标签五']" :key="key" @click="getKey(item, key)" style="margin-right: 5px">{{ item }}</el-tag>
            </div>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="24" >
          <el-form-item label="解决方案" prop="solutions">
            <div>
              <el-input v-model="dataForm.solutions"  type="textarea"
                        :rows="2" placeholder="请输入" clearable :style="{ width: '100%' }"></el-input>
              <el-button style='margin-top: 5px' type="primary" plain>添加信的标准答案</el-button>
            </div>

          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="解决方案" prop="fqaSolutionsList">
            <el-table :data="dataForm.fqaSolutionsList" size="mini">
              <el-table-column prop="version" label="版本号" width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.version" placeholder="请输入" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="描述">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.description" placeholder="请输入" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="standard" label="是否标准" width="100">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.standard" placeholder="请输入" clearable></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="cu-table-delBtn" @click="handleDelFqaSolutionsEntityList(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="addHandleFqaSolutionsEntityList()">
              <el-button type="text" icon="el-icon-plus">添加新的标准答案</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { options } from 'runjs'

export { default } from './index.js'
</script>
<style lang="scss">
.el-form-item.tag {
  &.el-form-item--small {
    .el-form-item__content {
      line-height: 18px !important;
    }
  }
}
</style>
